
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<style>
    input:focus{
        border: 1px solid #38c4ff;
        box-shadow: 0 0 5px #38c4ff;
        outline: 0;
        transition: box-shadow .25s linear 0s;
        -webkit-transition: box-shadow .25s linear 0s;
    }
    .userTel{
        width: 306px;
        height: 28px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        font-size: 14px;
        color: #666;
        line-height: 28px;
        padding: 6px 0 6px 12px;
        box-shadow: 0 0 5px #fff;
        outline: 0;
        transition: box-shadow .25s linear 0s;
        -webkit-transition: box-shadow .25s linear 0s;
        margin: 10px 0px 5px 60px;
    }
    .password{
        width: 306px;
        height: 28px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        font-size: 14px;
        color: #666;
        line-height: 28px;
        padding: 6px 0 6px 12px;
        box-shadow: 0 0 5px #fff;
        outline: 0;
        transition: box-shadow .25s linear 0s;
        -webkit-transition: box-shadow .25s linear 0s;
        margin: 10px 0px 5px 60px;
    }
    h1{
        margin: 0px 0 40px 0px;
    }
    p{
        margin: 0 0 0 60px;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link href="${pageContext.request.contextPath}/css/customer/regist.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js"></script>
<%--    <script src="${pageContext.request.contextPath}/js/jquery.md5.js"></script>--%>
<%--    <script src="${pageContext.request.contextPath}/js/customer/encrypt.js"></script>--%>
    <script src="${pageContext.request.contextPath}/dist/jsencrypt/bin/jsencrypt.min.js"></script>

</head>
<script>
    <%--if(${loginMsg}!=null){--%>
    <%--    alert(${loginMsg})--%>
    <%--}--%>
</script>
<body>
<div id="loginDiv">
    <form action="${pageContext.request.contextPath}/register" class="goform" method="post">
        <h1 style="text-align: center;color: #38c4ff;">注册新用户</h1>
        <p style="font-size: 14px">已经注册?
            <a style="text-decoration:none; font-size: 14px;color: #38c4ff;" href="${pageContext.request.contextPath}/customer/login.jsp"class="regist">马上登录<label id="sign_up_trip"></label></a>
        </p>
        <input class="userTel" id="userTel" type="text" name="custTelno" placeholder="输入您的手机号">
        <p style="font-size: 12px;color: red;" id="name_trip"></p>
<%--        <p>短信验证码:<input id="password" type="password"><label id="SMS verification code"></label> <input type="submit" class="button" id="button1" value="获取验证码"></p>--%>
<%--        <span id="up" style="display: none;color: red;font-size:13px;">*账号或密码错误</span>--%>
        <input type="hidden" name="consumerPassword" id="password">
        <input class="password" id="password1" type="password" name="consumerPassword1" placeholder="输入密码">
        <p style="font-size: 12px;color: red;" id="password_trip"></p>


        <div style="text-align: center;margin-top: 30px;">
            <input type="button" class="button" id="submit" value="立即注册">
            <input type="submit" style="visibility: hidden" class="go">
        </div>
    </form>
</div>
<script>
    // /!*=========================表单验证==============================*!/
    //验证用户名

    //验证手机号码
    document.querySelector("#userTel").onblur = checkUserTel;
    function  checkUserTel(){
        var userTel = document.querySelector("#userTel").value;
        if(userTel === "" ){// 是否为空
            //(3)消息提示
            document.querySelector("#name_trip").innerText = "手机号码不能为空";
            return false;
        }else if(!/^(0|86|17951)?1[0-9]{10}$/.test(userTel) ){
            document.querySelector("#name_trip").innerText = "不是有效的手机号码";
            return false;
        }else{
            document.querySelector("#name_trip").innerText = "";
            return true;
        }
    }
    //验证密码
    document.querySelector(".password").onblur = checkPassword;
    function  checkPassword(){
        var password = document.querySelector(".password").value;
        if(password === "" || password == null){// 是否为空
            //(3)消息提示
            document.querySelector("#password_trip").innerText = "密码不能为空";
            return false;
        }else if(!/^[a-zA-Z0-9]\w{5,19}$/.test(password) ){
            document.querySelector("#password_trip").innerText = "密码只能由6~20字母数字或下划线";
            return false;
        }else{
            document.querySelector("#password_trip").innerText = "";
            return true;
        }
    }

    //密码确认
    // function validate() {
    //     var password1 = document.getElementById("password1").value;
    //     var password2 = document.getElementById("password2").value;
    //     if(password1 === password2) {
    //         document.getElementById("tishi").innerHTML="< color='green'>两次密码相同</>";
    //         document.getElementById("submit").disabled = false;
    //     }
    //     else {
    //         document.getElementById("tishi").innerHTML="< color='red'>两次密码不相同</>";
    //         document.getElementById("submit").disabled = true;
    //     }
    // }
    //提交表单，验证
    var PUBLIC_KEY = '';
    $(".button").click(function () {
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/publickey",
            dataType: 'json',
            success: function (result) {
                PUBLIC_KEY = result.data; //获取公钥

                var encrypt = new JSEncrypt()
                encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----' + PUBLIC_KEY + '-----END PUBLIC KEY-----');
                var password = $(".password").val();
                var encrypted = encrypt.encrypt(password);
                // $(".password").val(encrypted);
                console.log('公钥:%o', PUBLIC_KEY);
                console.log('密码:%o', password)
                console.log('加密后数据:%o', encrypted);
                $('#password').val(encrypted);


                if (checkUserTel()  && checkPassword()) {
                    $(".go").click();
                };
            }

        });
    });
</script>
</body>
</html>